<script setup lang="ts">

import { AnswerVO } from '@/api/exam/answer/types';
import { QuestionType } from '@/api/exam/template/types';
import { getChooseLabel } from '@/utils/tagColor';
import { updateAnswer } from '@/api/exam/answer';
import { h } from 'vue';
import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined, PrinterOutlined } from '@ant-design/icons-vue';

interface Props {
  answer: any | AnswerVO;
  dialog: any;
}

const props = withDefaults(defineProps<Props>(), {
  answer: {},
  dialog: {
    visible: false,
    title: ''
  }
});
const answer = ref<AnswerVO>(props.answer);
const dialog = ref<DialogOption>({
  visible: false,
  title: ''
});

watch(() => props.dialog.visible, () => {
  dialog.value = props.dialog;
  answer.value = props.answer;
});

const updateFlag = ref('View');
const isFullscreen = ref(false);
const emit = defineEmits(['edit-close']);
const buttonLoading = ref(false);
const handleSubmit = async () => {
  buttonLoading.value = true;
  // 处理答案
  answer.value.answer = tempAnswerToAnswer(answer.value);
  await updateAnswer(answer.value).finally(() => buttonLoading.value = false);
  updateFlag.value = 'View';
};
const tempAnswerToAnswer = (temp) => {
  let answer = {};
  for (const [key, value] of Object.entries(temp.tempAnswer)) {
    if (
      (typeof value === 'string' && value === '') ||
      (Array.isArray(value) && value.length === 0) ||
      (typeof value === 'object' && value !== null && Object.keys(value).length === 0)
    ) {
      continue;
    }
    const question = temp.survey.children.find(q => q.id === key);
    if (question) {
      if (question.type === 'Radio' || question.type === 'TrueFalse') {
        answer[key] = { [value]: true };
      } else if (question.type === 'Checkbox') {
        answer[key] = {};
        value.forEach(option => {
          answer[key][option] = true;
        });
      } else {
        answer[key] = value;
      }
    }
  }
  return answer;
};
const handleClose = () => {
  emit('edit-close');
  updateFlag.value = 'View';
};

</script>

<template>
  <el-dialog v-model="dialog.visible" width="70%"
             :class="{'answer-dialog': !isFullscreen, 'answer-dialog-fullscreen': isFullscreen}"
             :fullscreen="isFullscreen" :show-close="false">
    <template #header>
      <a-flex justify="space-between" align="center">
        <el-text tag="b" size="large">{{ dialog.title }}</el-text>
        <a-flex gap="middle">
          <a-button type="text" :icon="h(PrinterOutlined)" />
          <a-button type="text" @click="isFullscreen=!isFullscreen"
                    :icon="h(isFullscreen ?FullscreenExitOutlined: FullscreenOutlined )" />
          <a-button type="text" @click="handleClose()" :icon="h(CloseOutlined)" />
        </a-flex>
      </a-flex>
    </template>
    <a-row :gutter="10">
      <a-col :span="14" style="max-height: 450px;overflow-y: scroll;">
        <div v-if="updateFlag==='View'" class="update-answer">
          <div class="pl-6 pr-6 " v-for="(template, index) in answer.survey.children">
            <div class="p-4 mt-2 vertical">
              <a-flex justify="space-between">
                <el-text size="small">第 {{ index + 1 }} 题</el-text>
                <a-flex justify="end" gap="small" align="center">
                  <el-tag v-if="answer.examInfo.questionScore[template.id]!==0" type="success">
                    得分: {{ answer.examInfo.questionScore[template.id] }}
                  </el-tag>
                  <svg-icon v-if="answer.examInfo.questionScore[template.id]=== template.attribute.examScore"
                            icon-class="true" color="#00bf6f" />
                  <svg-icon v-else icon-class="false" color="#ff6d56" />
                </a-flex>
              </a-flex>
              <div class="form-item-title">
                <el-text tag="b" size="large"> {{ template.title }}</el-text>
              </div>
              <div v-if="template.description!==null&&template.description!==undefined"
                   class="form-item-description">
                <p class=" question-title ml-10">{{ template.description }}</p>
              </div>
              <div class="data-edit-content">
                <a-radio-group v-if="template.type === QuestionType.Radio ||template.type === QuestionType.TrueFalse"
                               v-model:value="answer.tempAnswer[template.id]">
                  <a-row :gutter="[16,8]">
                    <a-col :span="24" v-for="(item,i) in template.children"
                           :class="{'right-answer': item.attribute.examCorrectAnswer===answer.tempAnswer[template.id]&&answer.tempAnswer[template.id]===item.id,
                                       'wrong-answer': item.attribute.examCorrectAnswer!==answer.tempAnswer[template.id]&&answer.tempAnswer[template.id]===item.id}"
                           class="default-radio-answer">
                      <a-radio size="large" :value="item.id" @click.prevent>
                        <span class="ml-2">{{ getChooseLabel(i) + item.title }}</span>
                      </a-radio>
                    </a-col>
                  </a-row>
                </a-radio-group>
                <a-checkbox-group v-if="template.type ===QuestionType.Checkbox"
                                  v-model:value="answer.tempAnswer[template.id]">
                  <a-row :gutter="[16,8]">
                    <a-col v-for="(item, idx) in template.children" :key="idx" :span="24"
                           :class="{'right-answer':  answer.tempAnswer[template.id].includes(item.attribute.examCorrectAnswer) && answer.tempAnswer[template.id].includes(item.id),
                           'wrong-answer': !answer.tempAnswer[template.id].includes(item.attribute.examCorrectAnswer) && answer.tempAnswer[template.id].includes(item.id),}"
                           class="default-checkbox-answer">
                      <a-checkbox :value="item.id" @click.prevent>
                        {{ item.title }}
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
                <div v-if="template.type === QuestionType.MultipleBlank || template.type === QuestionType.FillBlank">
                  <a-row :gutter="[16,8]">
                    <a-col v-for="(option, idx) in template.children" :key="idx" :span="24">
                      <a-input v-model:value="answer.tempAnswer[template.id][option.id]" readonly />
                    </a-col>
                  </a-row>
                </div>
                <div v-if="template.type ===QuestionType.Textarea">
                  <a-row :gutter="[16,8]">
                    <a-col v-for="(option, idx) in template.children" :key="idx" :span="24">
                      <a-textarea v-model:value="answer.tempAnswer[template.id][option.id]"
                                  :autosize="{ minRows: 2, maxRows: 6 }" resize="none" readonly />
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="updateFlag==='Update'" class="update-answer">
          <div class="pl-6 pr-6 " v-for="(template, index) in answer.survey.children">
            <div class="p-4 mt-2 vertical">
              <div class="mb-2 flex justify-between">
                <el-text size="small">第 {{ index + 1 }} 题</el-text>
                <el-tag type="success">得分: {{ answer.examInfo.questionScore[template.id] }}
                </el-tag>
              </div>
              <div class="form-item-title">
                <el-text tag="b" size="large"> {{ template.title }}</el-text>
              </div>
              <div v-if="template.description!==null&&template.description!==undefined"
                   class="form-item-description">
                <p class=" question-title ml-10">{{ template.description }}</p>
              </div>
              <div class="data-edit-content">
                <a-radio-group v-if="template.type === QuestionType.Radio ||template.type === QuestionType.TrueFalse"
                               v-model:value="answer.tempAnswer[template.id]">
                  <a-row :gutter="[16,8]">
                    <a-col v-for="(option, idx) in template.children" :key="idx" :span="24">
                      <a-radio :value="option.id">
                        {{ option.title }}
                      </a-radio>
                    </a-col>
                  </a-row>
                </a-radio-group>
                <a-checkbox-group v-if="template.type ===QuestionType.Checkbox"
                                  v-model:value="answer.tempAnswer[template.id]">
                  <a-row :gutter="[16,8]">
                    <a-col v-for="(option, idx) in template.children" :key="idx" :span="24">
                      <a-checkbox :value="option.id">
                        {{ option.title }}
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
                <div v-if="template.type === QuestionType.MultipleBlank || template.type === QuestionType.FillBlank">
                  <a-row :gutter="[16,8]">
                    <a-col v-for="(option, idx) in template.children" :key="idx" :span="24">
                      <a-input v-model:value="answer.tempAnswer[template.id][option.id]" />
                    </a-col>
                  </a-row>
                </div>
                <div v-if="template.type ===QuestionType.Textarea">
                  <a-row>
                    <a-col v-for="(option, idx) in template.children" :key="idx" :span="24">
                      <a-textarea v-model:value="answer.tempAnswer[template.id][option.id]"
                                  :autosize="{ minRows: 2, maxRows: 6 }" resize="none" />
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="10">
        <el-card class="update-answer" shadow="never">
          <el-tabs stretch>
            <el-tab-pane label="基本信息">
              <a-descriptions :column="1" class="label-width" :label-style="{minWidth: 100+'px'}">
                <!--                <a-descriptions-item label="序号">{{ answer.index }}</a-descriptions-item>-->
                <a-descriptions-item label="用户名">{{ answer.user.userName }}</a-descriptions-item>
                <a-descriptions-item label="提交时间">{{ answer.metaInfo.answerInfo?.endTime }}</a-descriptions-item>
                <a-descriptions-item label="修改时间">{{ answer.updateTime }}</a-descriptions-item>
                <a-descriptions-item label="操作系统">{{ answer.metaInfo.clientInfo?.platform }}</a-descriptions-item>
                <a-descriptions-item label="浏览器">{{ answer.metaInfo.clientInfo?.browser }}</a-descriptions-item>
                <a-descriptions-item label="IP地址">{{ answer.metaInfo.clientInfo?.remoteIp }}</a-descriptions-item>
              </a-descriptions>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </a-col>
    </a-row>
    <el-row>
      <div class="mt-2">
        <el-button v-if="updateFlag==='View'" round plain type="primary" @click="updateFlag='Update'">
          <svg-icon icon-class="edit" class="mr-4" />
          修改
        </el-button>
        <el-button v-if="updateFlag==='Update'" round plain type="success" :loading="buttonLoading"
                   @click="handleSubmit()">
          <svg-icon icon-class="save" class="mr-4" />
          保存
        </el-button>
        <el-button v-if="updateFlag==='Update'" round icon="remove" @click="updateFlag='View'">
          取消
        </el-button>
        <el-button plain type="danger" round @click="handleClose()">
          <svg-icon icon-class="close" class="mr-4" />
          关闭
        </el-button>
      </div>
    </el-row>

  </el-dialog>
</template>

<style scoped lang="scss">
.data-edit-content {
  margin-top: 14px;

  .ant-radio-group, .ant-checkbox-group {
    width: 100%;
  }
}
</style>
<style lang="scss">
.right-answer {
  color: #00bf6f !important;
  background: rgba(0, 191, 111, .05) !important;
  border: 1px solid rgba(0, 191, 111, .3) !important;
  border-radius: 4px;

  .ant-checkbox-checked .ant-checkbox-inner, .ant-radio-checked .ant-radio-inner {
    background-color: rgb(0, 191, 111) !important;
    border-color: rgb(0, 191, 111) !important;
  }

  .ant-checkbox-checked:after {
    border: 1px solid rgb(0, 191, 111) !important;
  }
}

.wrong-answer {
  color: #ff6d56 !important;
  background: rgba(255, 109, 86, .05) !important;
  border: 1px solid rgba(255, 109, 86, .3) !important;
  border-radius: 4px;

  .ant-checkbox-checked .ant-checkbox-inner, .ant-radio-checked .ant-radio-inner {
    background-color: #ff6d56 !important;
    border-color: #ff6d56 !important;
  }

  .ant-checkbox-checked:after {
    border: 1px solid #ff6d56 !important;
  }

}

.wrong-answer-background {
  color: #ff6d56 !important;
  background: rgba(255, 109, 86, .05) !important;
  border: 1px solid rgba(255, 109, 86, .3) !important;
  border-radius: 4px;
}
</style>
